<template>
    <div v-resizeHandle="handleResize" ref="browserEl" class="browser-view"/>
</template>
<script setup>
import exchanger from '@frontend/exchange'
import { ref , onMounted, watch, onUnmounted, computed } from 'vue'
import { useStore } from 'vuex'
import { offSet } from '@frontend/utils/utils'

const browserEl = ref(null)
const props = defineProps(['tabInfo'])
const browser = {
    browserId : ''
}
const store = useStore()
watch(
    () => store.getters['currentApp'],
    (value, oldValue) => {
        if( value === props.tabInfo.apptag){
            exchanger.putInvoke('sys-brower-view-active', browser.browserId)
            .then( res => { console.log(browser.browserId + ': actived')})
        }
    }, {immediate:true}
)

onMounted(()=>{ 
    const el = browserEl.value
    const pos = offSet(el) 
    const p = {
        apptag: props.tabInfo.apptag,
        width: el.offsetWidth,
        height: el.offsetHeight,
        y: pos.top,
        x: pos.left
    } 
    exchanger.putInvoke('sys-create-browser-view', p)
    .then( res => { 
        browser.browserId = res
    })
})
onUnmounted( (e)=>{
    exchanger.put('sys-browser-view-destroy', browser.browserId)
})

const handleResize = (e => {
    const el = browserEl.value
    const pos = offSet(el) 
    exchanger.put('sys-browser-view-resize', {
        id:  browser.browserId,
        width: el.offsetWidth,
        height: el.offsetHeight, 
        y: pos.top,
        x: pos.left
    })
})
</script>

<style lang="scss">
    .browser-view{
        position: relative;
        width:100%;
        height:100%;
        // background-color: red;
    }
    .browser-view > object {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
</style>